<template>
	<div class="v-view">
		<!--<Breadcrumb moduleName="SQL查询/查询列表">
		</Breadcrumb>-->
		<div class="header">
			<span @click="sqlClick"  class="query">自定义查询/</span>
			<span class="chear">查询列表</span>
		</div>
		<div class="box-selfquery">
			<div class="from_submit">
				<a-space>
					<span>名称:</span>
					<a-input v-model="params.name"/>
					<a-button type="primary" @click="searchClick">
						搜索
					</a-button>
				</a-space>
			</div>
			<div class="table_source">
				<a-table style="width: 100%" bordered :columns="columns"
								 :data-source="listSource" :pagination="pagination"
								 @change="handleTableChange" :loading="loading">
					<a slot="tags" slot-scope="item">
						<a-button @click="editFile(item)">编辑</a-button>
						<a-button @click="delFile(item)">删除</a-button>
					</a>
				</a-table>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import {Component, Prop, Vue} from 'vue-property-decorator'
	import Breadcrumb from '@/layout/components/Breadcrumb/index.vue'
	import Shortcuts from '@/layout/components/Breadcrumb/Shortcuts.vue'
	import { requestSqlList,deleteSqlSentence } from '@/api/sql'

	@Component({
		components: {
			Breadcrumb,
			Shortcuts
		}
	})
	export default class SelfQuery extends Vue {
		@Prop() private msg!:string
		private visible = false
		private loading = false
		private listSource:Array<any> = []
		private params = {
			current: 1,
			name: "",
			projectId: localStorage.getItem('productId'),
			size: 10
		}
		private total = ""
		private columns = [
			{align: "center", title: '名称', dataIndex: 'sqlName', key: 'sqlName',},
			{align: "center", title: '查询语句', dataIndex: 'sqlText', key: 'sqlText',},
			{align: "center", title: '操作', scopedSlots: {customRender: 'tags'}},
		]
		private pagination = {
			total: 0,
			pageSize: 10,//每页中显示10条数据
			showSizeChanger: true,
			pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据
			showTotal:( total:any) => `共有 ${total} 条数据`,  //分页中显示总的数据
		}

		mounted(): void {
			this.requestSqlList()
		}

		sqlClick(){
			this.$router.push({name: "SelfQuery"})
		}

		editFile(item:any) {
			this.$router.push({name: "SelfQuery", query: { editData: item } })
		}

		delFile(item:any) {
			let this_deleteSqlSentence = this.deleteSqlSentence/*删除后，数据将不在展示，请确认是否删除该条数据？*/
			this.$confirm({title: '提示', content: '删除后，数据将不在展示，请确认是否删除该条数据？', okText: '确认', cancelText: '取消',
				onOk() {
					this_deleteSqlSentence(item)
				}
			})
		}

		//sql列表接口
		requestSqlList() {
			this.loading = true
			requestSqlList(this.params).then(res => {
				if(res.code == 200 && res.data.rows){
					this.pagination.total = res.data.total
					let count = 0
					let obj:Array<any> = []
					for(let i = 0 ; i < res.data.rows.length ; i++ ){
						res.data.rows[i].key = count++ //<a-table>需要一个kek,要不然控制台报错
						obj.push(res.data.rows[i])
					}
					this.listSource = obj
					this.loading = false
				}else {
					console.log("error",res)
				}
			}).catch((err: any) => {
				this.$message.error(err.msg || err.message, 5)
			})
		}

		//列表分页事件
		handleTableChange(pagination:any) {
			this.params.current = pagination.current
			this.params.size = pagination.pageSize
			this.requestSqlList()
		}

		//删除查询sql接口
		deleteSqlSentence(item:any) {
			deleteSqlSentence(item).then(res => {
				if(res.code == 200){
					this.$message.success("删除成功")
					this.requestSqlList()
				}else {
					this.$message.warning("删除失败")
					console.log("deleteSqlSentence请求失败")
				}
			}).catch((err: any) => {
				this.$message.error(err.msg || err.message, 5)
			})
		}

		//名称查询
		searchClick(){
			this.requestSqlList()
		}
	}
</script>

<style lang="scss" scoped>
	.header{
		flex: 1;
		font-size: 16px;
		line-height: 56px;
		color: #9aa2b4;
		font-weight: 600;
		border-bottom: 1px solid $border;
		padding-left: 24px;
		.query{
			cursor:pointer
		}
		.chear{
			color: #595959;
		}
	}
	.v-view {
		background-color: white;
		height: 100%;
	}
	/*.box-selfquery{
	}*/
	.from_submit {
		margin-top: 15px;
		margin-left: 15px;
	}
	.table_source{
		margin-top: 10px;
		height: 520px;
		max-height: 1080px;
		overflow-y: scroll;
		padding: 0 10px 10px 10px;
	}
	/deep/.ant-table-wrapper{
		margin-bottom: 50px;
	}
</style>
